/*
 * @Author: LGX
 * @Date: 2022-03-31 19:40:24
 * @LastEditors: LGX
 * @LastEditTime: 2022-04-06 14:48:32
 * @FilePath: \erp-management-system\src\components\customerseas\Customfield.jsx
 * @Description: 自定义字段
 * 
 */
import React, { useState } from 'react';
import { Checkbox, Space, Input, Modal, Table } from 'antd'
import { SettingOutlined, DownOutlined, UpOutlined, FormOutlined, CloudUploadOutlined, CloudDownloadOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
const Customfield = () => {
    //修改字段模态框
    const [ismodifyField, setmodifyField] = useState(false);
    const [fieldName, setfieldName] = useState('');
    const data = [
        {
            key: 'customer',
            fieldsName: '客户名称',
            showName: '客户名称',
            listShow: 1,
            isRequire: 0,
        },
        {
            key: 'contact',
            fieldsName: '联系人',
            showName: '联系人',
            listShow: 1,
            isRequire: 1,
        },
        {
            key: 'jobType',
            fieldsName: '职位',
            showName: '职位',
            listShow: 0,
            isRequire: 1,
        }, {
            key: 'phone',
            fieldsName: '手机号码',
            showName: '手机号码',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'qq',
            fieldsName: 'QQ',
            showName: 'QQ',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'email',
            fieldsName: '电子邮箱',
            showName: '电子邮箱',
            listShow: 0,
            isRequire: 1,
        }, {
            key: 'birthday',
            fieldsName: '生日',
            showName: '生日',
            listShow: 0,
            isRequire: 1,
        }, {
            key: 'region',
            fieldsName: '所在地区',
            showName: '所在地区',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'address',
            fieldsName: '详细地址	',
            showName: '详细地址	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'postcode',
            fieldsName: '邮编',
            showName: '详细地址	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'customerType',
            fieldsName: '客户类型',
            showName: '详细地址	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'customerLevel',
            fieldsName: '客户级别',
            showName: '客户级别	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'customerSource',
            fieldsName: '客户来源',
            showName: '客户来源	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'profession',
            fieldsName: '所属行业',
            showName: '所属行业	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'goodsType',
            fieldsName: '商品类别',
            showName: '商品类别	',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'url',
            fieldsName: '网址',
            showName: '网址',
            listShow: 0,
            isRequire: 1,
        },
        {
            key: 'comment',
            fieldsName: '备注',
            showName: '备注	',
            listShow: 0,
            isRequire: 1,
        },
    ];
    const columns = [
        {
            title: '字段名称',
            dataIndex: 'fieldsName',
            key: 'fieldsName'
        },
        {
            title: '显示名称',
            dataIndex: 'showName',
            key: 'showName',
            render: (showName) => {
                return <>
                    {showName}<FormOutlined onClick={() => modifyField(showName)} style={{ 'color': "#577cc1", "cursor": "pointer" }} />
                </>
            }
        },
        {
            title: '列表显示',
            dataIndex: 'listShow',
            key: 'listShow',
            render: (listShow, e) => {
                return <Checkbox defaultChecked={listShow} onChange={() => { listShowOnchange(e, listShow) }} ></Checkbox>
            }
        },
        {
            title: '是否必填',
            dataIndex: 'isRequire',
            key: 'isRequire',
            render: (isRequire) => {
                return <Checkbox defaultChecked={isRequire} onChange={isRequireOnchange}></Checkbox>
            }
        },
    ];
    //点击修改字段
    const modifyField = (showName) => {
        console.log(showName);
        setfieldName(showName)
        setmodifyField(true)
    }
    // 是否必填
    const isRequireOnchange = (e) => {
        console.log(e.target.checked);
    }
    // 列表展示
    const listShowOnchange = (e, listShow) => {
        // console.log(e.target.checked);
        console.log(listShow);
        console.log(e.listShow);

    }
    return (
        <>
            <Table columns={columns} dataSource={data} pagination={false} />
            <Modal title="修改字段显示名称" visible={ismodifyField} onOk={() => setmodifyField(false)} onCancel={() => setmodifyField(false)}>
                <Space>
                    <span>显示名称：</span>
                    <Input value={fieldName} />
                </Space>
                <div style={{ textAlign: 'center', color: 'red', fontSize: '18px', fontWeight: '900' }}>
                    <p>字段名称(含自定义字段)不要重复！</p>
                    <p>否则导出会报错！</p>
                </div>
            </Modal>
        </>
    );
}

export default Customfield;
